<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
  <style>
    .item-container {
      display: flex;
      justify-content: space-around;
      position: relative;
    }

    .right-container {
      display: flex;
    }

    .img {
      width: 40px;
      position: absolute;
      right: 0;
      transform: rotate(45deg)
    }

  </style>
</head>

<body>
  <div id='root'>
    <componentitem v-for='(item,index) in list' :item='item' :index='index' @add='add' @sub='sub'>
      <img src="./zk.png" class='img' v-if='item.discount'>
    </componentitem>
    <div>
      {{ total | currencyUSD }}
    </div>
  </div>

  <script>
    // * 自定义过滤器(全局)
    Vue.filter('currencyUSD', function (value) {
      return '$' + value
    })

    let componentitem = {
      template: `
                <div class='item-container'>
                    <div>{{item.name}}</div>
                    <div class='right-container'>
                        <div>
                            {{item.price | currencyUSD }}
                        </div>

                        <div>
                            <button @click='sub'>-</button>
                                {{item.count}}
                            <button @click='add'>+</button>
                        </div>
                    </div>
                    <slot/>
                </div>
            `,
      props: ['item', 'index'],
      methods: {
        sub() {
          this.$emit('sub', this.index)
        },
        add() {
          this.$emit('add', this.index)
        }
        // sub(){
        //     if(this.item.count > 1){
        //         this.item.count--;
        //     }else{
        //         alert('至少1个');
        //     }
        // },
        // add(){
        //     if(this.item.count < 4){
        //         this.item.count++;
        //     }else{
        //         alert('至多4个');
        //     }
        // }
      }
    }

    let vm = new Vue({
      el: '#root',
      components: {
        componentitem
      },
      data: function () {
        return {
          list: [{
              name: "香蕉",
              price: 10,
              count: 1,
              discount: false
            },
            {
              name: "苹果",
              price: 20,
              count: 1,
              discount: true
            },
            {
              name: "榴莲",
              price: 30,
              count: 1,
              discount: false
            },
            {
              name: "葡萄",
              price: 50,
              count: 1,
              discount: false
            },
            {
              name: "西瓜",
              price: 50,
              count: 1,
              discount: true
            },
            {
              name: "甘蔗",
              price: 50,
              count: 1,
              discount: false
            }
          ]
        }
      },
      methods: {
        sub(index) {

          if (this.list[index].count > 1) {
            this.list[index].count--;
          } else {
            alert('至少1个');
          }

        },
        add(index) {

          if (this.list[index].count < 4) {
            this.list[index].count++;
          } else {
            alert('至多4个');
          }
        }
      },
      computed: {
        total() {
          let sum = 0;

          this.list.forEach((item) => {
            sum += item.price * item.count
          })

          return sum;
        }
      }
    })

  </script>
</body>

</html>
